  <template> 
	<div class="JNPF-common-layout">
		<div class="JNPF-common-layout-center">
			<el-row class="JNPF-common-search-box" :gutter="16">
				<el-form @submit.native.prevent>
					<el-col :span="6">
						<el-form-item label="风险点类型">
							<el-select v-model="fxdlx" placeholder="设施设备" clearable >
								<el-option v-for="(item, index) in fxdlxOptions" :key="index" :label="item.fullName" :value="item.id"  />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
						<el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
					</el-form-item>
					</el-col>
				</el-form>
			</el-row>
			<div class="JNPF-common-layout-main JNPF-flex-main">
				<div class="JNPF-common-head">
					<div>
					</div>
					<div class="JNPF-common-head-right">
						<el-tooltip effect="dark" content="刷新" placement="top">
							<el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false"  @click="reset()" />
						</el-tooltip>
						<screenfull :isContainer="true" />
						<el-tooltip effect="dark" content="列设置" placement="top">
							<el-link icon="icon-ym icon-ym-options JNPF-common-head-icon" :underline="false" />
						</el-tooltip>
					</div>
				</div>
				<JNPF-table :cell-style="tableCellStyle" v-loading="listLoading" :data="list" :span-method="arraySpanMethod">
          <el-table-column
            align="center"
            label="风险点"
            width="120">
					<el-table-column label="类型名称"  prop="fxdlx" algin="left" width="90px">
						<template slot-scope="scope">{{ scope.row.fxdlx | dynamicText(fxdlxOptions) }}</template>
					</el-table-column>
          <el-table-column prop="fxdid" label="风险点名称" align="left" width="100px" />
          </el-table-column>
          <el-table-column
            align="center"
            label="检查项目"
            width="120">
					<el-table-column v-if="fxdlx == 0" prop="jcxm" label="检查项目" align="center" />
					<el-table-column v-if="fxdlx == 0" prop="jcbz" label="检查标准" align="center" width="120px" />
					<el-table-column v-if="fxdlx == 0" prop="bfhbzqk" label="不符合标准情况" align="center" width="110px" />
					<el-table-column v-if="fxdlx == 0 || fxdlx == 2" prop="zyhg" label="主要后果" align="center" width="120px" />
					<el-table-column v-if="fxdlx == 1" prop="zybz" label="作业步骤" align="center" width="150px" />
					<el-table-column v-if="fxdlx == 1" prop="wxyhqzsj" label="危险源或潜在事件" align="center" width="120px" />
					<el-table-column v-if="fxdlx == 1" prop="knfsdsjlxjhg" label="事故类型及后果" align="center" width="110px" />
					<el-table-column v-if="fxdlx == 2" prop="jd" label="节点" align="center" />
					<el-table-column v-if="fxdlx == 2" prop="cs" label="参数" align="center" />
					<el-table-column v-if="fxdlx == 2" prop="csms" label="参数描述" align="center" />
					<el-table-column v-if="fxdlx == 2" prop="ydc" label="引导词" align="center" />
					<el-table-column v-if="fxdlx == 2" prop="knyy" label="可能原因" align="center" />
					<el-table-column v-if="fxdlx == 2" prop="pc" label="偏差" align="center" />
          </el-table-column>
          <el-table-column prop="gkcs" label="管控措施" width="200px" align="center"/>
					<el-table-column prop="qy" label="所属区域" align="center" />
					<el-table-column prop="fzr" label="负责人" align="center" />
					<el-table-column prop="f_organizeid" label="负责人部门" align="center" />
          <el-table-column prop="fxdj" label="风险等级" align="center">
            <template slot-scope="scope">
              {{scope.row.fxdj | fitterFxdj}}
            </template>
          </el-table-column>
					<el-table-column prop="fxz" label="风险值" fixed="right" align="center" />
        </JNPF-table>
				<pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData" />
			</div>
		</div>
	</div>

</template> 
  <script>
  import request from '@/utils/request'

  export default {
    name:'rick',
    data() {
      return {
        spanObj:{},
        riskevaluation:false,
        showAll: false,
        row:'',
	      column:'',
        gcjscs:{},
        fxdlx:0,
        defaultProps: {
          children: 'children',
          label: 'fullName'
        },
        list: [],
        arr: [],
        listLoading: false,
        total: 0,
        listQuery: {
          currentPage: 1,
          pageSize: 20,
          sort: "desc",
          sidx: "",
        },
        formVisible: false,
        exportBoxVisible: false,
        fxdlxOptions:[{"fullName":"设备设施","id":"0"},{"fullName":"作业活动","id":"1"},{"fullName":"工艺节点","id":"2"}],
        ztOptions:[{"fullName":"已评价","id":"0"},{"fullName":"未评价","id":"1"}],
      }
    },
    watch: {
      fxdlx (newValue, oldValue) {
        if(newValue) {
          this.initData()
        }
      },
    },
    filters: {
      fitterFxdj: (val) => {
        let value = Number(val)
        let txt = ['重大风险','较大风险','一般风险','低风险'][value-1]
        return txt

        // if(val == 1) {
        //   return '重大风险'
        // } else if(val == 2) {
        //   return '较大风险'
        // } else if(val == 3) {
        //   return '一般风险'
        // } else {
        //   return '低风险'
        // }
      }
    },
    created() {
      this.initData();
      this.fxdlx = this.fxdlxOptions[0].id
    },
    methods: {
      // 背景颜色处理
      tableCellStyle ({row, column, rowIndex, columnIndex}) {
        if(this.fxdlx == 0) {
          if(columnIndex === 11) {
            return this.isColor(row.fxdj) 
          }
        }else if (this.fxdlx == 1){
          if(columnIndex === 10) { 
            return this.isColor(row.fxdj)
          }
        } else {
          if(columnIndex === 14) { 
            return this.isColor(row.fxdj)
          }
        }
      },
      // 背景颜色处理
      isColor(fxdj){
        let value = Number(fxdj)
        let color = ['background:red','background:orange', 'background:yellow','background:blue; color:white'][value - 1]
        return color

        // switch(value) {
        //   case 4 :
        //     return 'background:blue; color:white'
        //   break
        //   case 2 :
        //     return 'background:orange'
        //   break
        //   case 1 :
        //     return 'background:red'
        //   break
        //   default :
        //     return 'background:yellow'
        //   break
        // }

        // if(fxdj == 4) {
        //   return 'background:blue; color:white' 
        // }else if(fxdj == 2) {
        //   return 'background:orange' 
        // }else if(fxdj == 1) { 
        //   return 'background:red'
        // } else {
        //   return 'background:yellow'
        // }
      },
      // 合并单元格
      flitterData(arr){
        let spanOneArr = [],
        spanTwoArr = [],
        spanThreeArr = [],
        concatOne = 0,
        concatTwo = 0
        // concatThree =0;
        arr.forEach((item,index)=>{
          if(index === 0){
            spanOneArr.push(1);
            spanTwoArr.push(1);
            spanThreeArr.push(1);
          }else{
            if(item.fxdlx === arr[index - 1].fxdlx){ //第一列需合并相同内容的判断条件
              spanOneArr[concatOne] += 1;
              spanOneArr.push(0);
            }else{
              spanOneArr.push(1);
              concatOne = index;
            };
            if(item.fxdid === arr[index - 1].fxdid&&item.fxdlx === arr[index - 1].fxdlx){//第二列需合并相同内容的判断条件
              spanTwoArr[concatTwo] += 1;
              spanTwoArr.push(0);
            }else{
              spanTwoArr.push(1);
              concatTwo = index;
            };
          }
        });
        return  {
            one: spanOneArr,
            two: spanTwoArr,
        }
    },
    // 合并单元格
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // let arr1 = ''
      // if(columnIndex === 1) arr1 = one
      // if(columnIndex === 2) arr1 = two
      // console.log(arr1);
      // const _row = (this.flitterData(this.arr)[arr1])[rowIndex];
      //   const _col = _row > 0 ? 1 : 0;
      //   return {
      //     rowspan: _row,
      //     colspan: _col
      //   };
      if(columnIndex === 1 ) {
        const _row = (this.flitterData(this.arr).one)[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if(columnIndex === 2) {
        const _row = (this.flitterData(this.arr).two)[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
      // 处理数据
      dealValue(name){
        for(let i in this.list) {
          if(this.list[i]) {
            if(this.list[i][name] != undefined) {
            let a =	JSON.parse(this.list[i][name]).map(item => item.value)
              this.list[i][name] =a.toString();
            }
          }
        }
      },
      // 获取数据
      initData() {
        this.listLoading = true;
        request({
          url: `/api/System/RiskPlanpoint/Actions/RiskStanding/` + this.fxdlx ,
          method: 'get',
          data: this.listQuery
        }).then(res => {
          this.list =res.data
          this.arr = res.data
          this.arr.sort((a,b)=>{
            if(a['fxdid'] != b['fxdid']){
              return a['fxdid'].localeCompare(b['fxdid']);
            }
          })
        	this.total = res.data.length
          this.listLoading = false
        	this.$nextTick(() => {
            this.tableHeight = "100%"
        	});
        })
      },
      search() {
        this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
        }
        this.initData()
      },
      refresh(isrRefresh) {
        this.formVisible = false
        if (isrRefresh) this.reset()
      },
      reset() {
        // for (let key in this.fxdlx) {
        //   this.fxdlx[key] = undefined
        // }
        this.listQuery = {
          currentPage: 1,
          pageSize: 20,
          sort: "desc",
          sidx: "",
        }
        this.fxdlx = 0
        this.initData()
      }
    }
  }
</script>